<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<title>账单一览</title>
	<script type="application/javascript" src="/static/js/common.js"></script>
	<style>
		.weui-form-preview{
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<nav class="nav">
		<a class="button button-link left" onclick="history.back();">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-fanhui-"></use>
			</svg>返回
		</a>
		<a class="button button-link right" onclick="history.go(0);">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-zhuanfa-"></use>
			</svg>刷新
		</a>
		<h1 class="title">账本查询</h1>
	</nav>
	<header class='app-header'>
		<h1 class="app-title">账本查看</h1>
		<input type="hidden" id="current" th:value="${page.getCurrent()}">
		<input type="hidden" id="size" th:value="${page.getSize()}">
		<input type="hidden" id="total" th:value="${page.getTotal()}">
		<input type="hidden" id="uuid" th:value="${uuid}">
		<input type="hidden" id="type" th:value="${type}">

	</header>
	<div class="app-content app-bg">
		<div class="weui-form-preview" th:each="book : ${page.getRecords()}">
			<div class="weui-form-preview__hd">
				<label class="weui-form-preview__label">金额</label>
				<em class="weui-form-preview__value">¥[[${book.getConsumePrice()}]]</em>
			</div>
			<div class="weui-form-preview__bd">
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">消费所属</label>
					<span class="weui-form-preview__value" th:text="${book.getConsumeOwnerName()}"></span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">消费名称</label>
					<span class="weui-form-preview__value" th:text="${book.getConsumeName()}"></span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">消费类型</label>
					<span class="weui-form-preview__value" th:text="${book.getConsumeTypeName()}"></span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">消费时间</label>
					<span class="weui-form-preview__value" th:text="${#dates.format(book.getConsumeTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">是否结算</label>
					<span class="weui-form-preview__value">
						<span th:if="${book.getClose()}">【已结算】</span>
						<span th:unless="${book.getClose()}">[未结算]</span>
					</span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">参与人</label>
					<span class="weui-form-preview__value">
						<p th:text="${book.getConsumeJoinName()}"></p>
					</span>
				</div>
<!--				<div class="weui-form-preview__item">-->
<!--					<span class="weui-form-preview__value">-->
<!--						<a>查看详情</a>-->
<!--					</span>-->
<!--				</div>-->
			</div>
		</div>
	</div>
	<!-- 加载更多 -->
	<div class="weui-loadmore" th:if="${page.hasNext()}">
		<i class="weui-loading"></i>
		<span class="weui-loadmore__tips">正在加载</span>
	</div>

<script type="text/html" id="book_list_tpl">
	{{#  layui.each(d, function(index, book){ }}
	<div class="weui-form-preview">

		<div class="weui-form-preview__hd">
			<label class="weui-form-preview__label">金额</label>
			<em class="weui-form-preview__value">¥{{book.consumePrice}}</em>
		</div>
		<div class="weui-form-preview__bd">
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">消费所属</label>
				<span class="weui-form-preview__value">{{book.consumeOwnerName}}</span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">消费名称</label>
				<span class="weui-form-preview__value">{{book.consumeName}}</span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">消费类型</label>
				<span class="weui-form-preview__value">{{book.consumeTypeName}}</span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">消费时间</label>
				<span class="weui-form-preview__value">{{book.consumeTime}}</span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">是否结算</label>
				<span class="weui-form-preview__value">
					{{# if(book.close){ }}
					<span>【已结算】</span>
					{{# }else{ }}
					<span>[未结算]</span>
					{{# } }}
				</span>
			</div>
			<div class="weui-form-preview__item">
				<label class="weui-form-preview__label">参与人</label>
				<span class="weui-form-preview__value">
					<p>{{book.consumeJoinName}}</p>
				</span>
			</div>
<!--			<div class="weui-form-preview__item">-->
<!--				<span class="weui-form-preview__value">-->
<!--					<a>查看详情</a>-->
<!--				</span>-->
<!--			</div>-->
		</div>
	</div>
	{{#  }); }}

</script>

<script type="application/javascript">
	layui.use(['laytpl'], function () {
		var loading = false, laytpl = layui.laytpl, uuid = $("#uuid").val()
			,current = $("#current").val(), size = $("#size").val(), type = $("#type").val();

		$(".app-content").infinite().on("infinite", function() {
			if(loading) return;
			loading = true;
			current = Number(current) + 1;
			if("join" === type){
				load_list("/api/book/list-book-by-bill-join", current);
			}else if("my_join" === type){
				load_list("/api/book/list-my-book-join", current);
			}else {
				load_list("/api/book/list-book-by-bill", current);
			}
		});

		/* 加载列表 */
		function load_list(url, current){
			$.get(url, {current: current, size: size, uuid: uuid}, function (res) {
				APP.ajaxRes(res, function (data) {
					laytpl($("#book_list_tpl").html()).render(data, function (_html) {
						$(".app-content").append(_html);
						loading = false;
					})
				});
				//是否有下一页
				if(res.status !== "next"){
					loading = true;
				}
			});
		}
	})
</script>
</body>
</html>
